<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator=">">
            <el-breadcrumb-item >{{$t('设置')}}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/setting/password' }">{{$t('支付设置')}}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 个人资料 -->
        <div class="mine-info-card">
            <div style="display: flex;">
                <div>
                    <img style="width: 5.63rem;height: 5.63rem;border-radius: 50%" src="../assets/img/image/avatar2.png" />
                </div>
                <div style="margin-left: 1rem;">
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('账号id') }}</div>
                        <div class="info-value">{{ mineInfo.invite_code }}</div>
                    </div>
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('账号名') }}</div>
                        <div class="info-value">{{ mineInfo.name }}</div>
                    </div>
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('注册时间') }}</div>
                        <div class="info-value">{{ mineInfo.register_date }}</div>
                    </div>
                </div>
                <div style="margin-left: 1rem;">
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('邮箱') }}</div>
                        <div class="info-value">{{ mineInfo.email }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设置信息 -->
         <div class="set-card">
            <!-- 分段器 -->
            <div class="custom-style" style="width: 25rem;">
                <el-segmented v-model="value" :options="options" block style="background-color: #fff;" @change="segmentChange"></el-segmented>
            </div>
            <!-- 表单 -->
            <div style="margin-top: 1rem;">
                <el-form :model="card" label-width="8rem" style="max-width: 28rem" :rules="rules" ref="ruleForm">
                    <el-form-item :label="formtitle[0]" prop="name">
                        <el-input v-model="card.name" :placeholder="formtitle[2]"></el-input>
                    </el-form-item>
                    <el-form-item :label="formtitle[1]" prop="account">
                        <el-input v-model="card.account" :placeholder="formtitle[2]"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 按钮 -->
             <div>
                <el-button class="save-btn" @click="saveInfo()">{{ $t('表单.保存按钮') }}</el-button>
             </div>
         </div>
    </div>
</template>
<script>
import {getUser} from '../apis/user'
export default{
    data(){
        return {
            mineInfo:{
                "name": "",
                "invite_code": "",
                "email": "",
                "subscription": "",
                "expired_at": "",
                "is_active": false,
                "register_date":''
            },
            options:[this.$t('账号'),this.$t('密码'),this.$t('卡')],
            value:'Card',
            formtitle:[this.$t('姓名'),this.$t('银行卡账号'),this.$t('placeholder')],
            card:{
                name:'',
                account:''
            },
            rules:{
                name:[
                    {required:true,message:'Please input name',trigger: 'blur'},
                ],
                account:[
                    {required:true,message:'Please input account',trigger: 'blur'},
                ]
            }
        }
    },
    mounted(){
        this.getUserInfo();
        this.$gtm.trackView({ page: this.$route.path });
    },
    methods:{
        getUserInfo(){
            getUser().then((res)=>{
                if(res.code == 200 && res.status == 1){
                    console.log(res)
                    this.mineInfo = res.data
                }
            })
        },
        segmentChange(e){
            console.log(e)
            if(e ==="Account"){
                this.$router.push('/setting/mine')
            }else if(e ==="Password"){
                this.$router.push('/setting/password')
            }
        },
        saveInfo(){ 
            this.$refs.ruleForm.validate((valid)=>{
                if(valid){
                    console.log(valid)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.mine-info-card{
    margin: 1rem 0 0 0;
    padding: 1rem;
    box-sizing: border-box;
    width: 74.38rem;
    height: 8.13rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(22, 93, 255, 1);
    font-size: 0.88rem;
    font-family: Roboto;
    .info-title{
        width: 7.5rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(78, 89, 105, 1);
        font-size: 0.88rem;
        text-align: right;
        font-family: AlibabaPuHui-regular;
    }
    .info-value{
        margin-left: 1rem;
        width: 12.5rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(16, 16, 16, 1);
        font-size: 0.88rem;
        text-align: left;
        font-family: AlibabaPuHui-regular;
    }
}
.set-card{
    margin: 1rem 0 0 0;
    padding: 1rem;
    box-sizing: border-box;
    width: 74.38rem;
    height: 36.5rem;
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 1);
}
.custom-style .el-segmented {
//   --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-color:#1F63FF ;
//   --el-segmented-item-bg-color: #fff;
  --el-segmented-item-selected-bg-color: #F2F3F8;
  --el-border-radius-base: 16px;
}
.save-btn{
    margin: 1rem 0 5rem 9rem;
    width: 5.63rem;
    height: 1.88rem;
    border-radius: 0.25rem;
    background-color: rgba(31, 99, 255, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 0.88rem;
    text-align: center;
    font-family: Roboto;
}
</style>